<template>
	<nt-container>
		<view class="goods-fixed" v-if="fixedShow">
			<u-subsection mode="subsection" :list="list" :current="current" @change="getChange"
				:customStyle="{height:'40px',background:'#fff'}" activeColor="#007aff" bgColor="#fff"
				inactiveColor="#007aff"></u-subsection>
		</view>
		<scroll-view :scroll-into-view="toView" scroll-y="false" @scroll="scrollY">
			<view class="goods" :style="{height}" id="goods">
				<!-- 轮播图 -->
				<u-swiper @click="openImage" :list="order.images_list" imgMode="scaleToFill" height="600rpx"
					@change="e => currentNum = e.current">
					<view slot="indicator" class="indicator-num" v-if="order.images_list&&order.images_list.length>0">
						<text class="indicator-num__text">{{ currentNum + 1 }}/{{ order.images_list.length }}</text>
					</view>
				</u-swiper>
				<!-- 数据面板 -->
				<view class="goods-info">
					<view class="goods-info_title">
						{{order.parts_name}}
					</view>
					<view class="goods-info_box">
						<view class="box">
							<text class="box-label">数量: </text><text
								style="font-size: 40rpx;color:red">{{order.number}}</text>
						</view>
						<view class="box">
							<text class="box-label">价格: </text><text style="color:red">{{order.parts_price}}</text>
						</view>
					</view>
					<view class="goods-info_box">
						<view class="box">
							<text class="box-label">分类:</text><text class="box-value">{{order.parts_type}}</text>
						</view>
						<view class="box">
							<text class="box-label">地区:</text><text class="box-value">{{order.area}}</text>
						</view>
					</view>
					<view class="goods-info_box">
						<view class="box">
							<text class="box-label">上架时间:</text><text class="box-value">{{order.create_time}}</text>
						</view>
					</view>
					<view class="goods-info_box" v-if="order.user&&order.user.nickname&&order.user.mobile">
						<view class="box">
							<text class="box-label">出售者:</text>
							<text class="box-value">{{order.user.username}}</text>
						</view>
						<view class="box">
							<text class="box-label">电话:</text>
							<text class="box-value" style="color: rgb(45, 127, 253);"
								@tap="callPhone(order.user.mobile)">{{order.user.mobile}}</text>
						</view>
					</view>
				</view>
				<!-- 备注详情 -->
				<view class="goods-publicBox" id="remark">
					<view class="goods-publicBox-title">
						备注详情
					</view>
					<view class="goods-publicBox-content" style="font-size: 28rpx;color:#8f8f94">
						{{order.remarks}}
					</view>
				</view>

			</view>
		</scroll-view>
		<!-- 立即购买 -->
		<u-popup :show="show" @close="show=false">
			<view class="order-buy">
				<view class="order-buy-top" v-if="order.images_list&&order.images_list.length>0">
					<u--image :src="order.images_list[0]" width="200rpx" height="200rpx" mode="scaleToFill" />
					<view class="order-buy-content">
						<view class="title">
							{{order.parts_name}}
						</view>
						<view class="goods-info_box">
							<view class="box">
								<text class="box-label">分类:</text><text class="box-value">{{order.parts_type}}</text>
							</view>
							<view class="box">
								<text class="box-label">地区:</text><text class="box-value">{{order.area}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="order-buy-price">
					价格：<text style="color: #F00;">￥{{order.parts_price}}</text>
				</view>
				<view class="order-buy-number">
					<text>购买数量</text>
					<u-number-box :max="order.number" v-model="options.number" @change="getChangeNumber"></u-number-box>
				</view>
				<view class="order-buy-price">
					总价格：<text style="color: #F00;">￥{{total}}</text>
				</view>
				<view class="order-buy-choose" @tap="orderShow=true">
					<text style="margin-right:20rpx;">选择订单</text>
					<u--input placeholder="请选择订单" :disabled="true" border="none"
						v-model="options.realorder_text"></u--input>
				</view>
				<view class="order-buy-submit">
					<u-button color="#dd524d" @click="submit" text="确定"></u-button>
				</view>
			</view>
		</u-popup>
		<view class="goods-button">
			<view class="button" @tap="callPhone(order.user.mobile)">
				联系卖家
			</view>
			<view class="button" @tap="show=true">
				立即购买
			</view>
		</view>
		<u-picker :overlayStyle="{zIndex:10075}" :show="orderShow" :columns="columns" @cancel="orderShow=false"
			@confirm="confirm"></u-picker>
	</nt-container>
</template>

<script>
	import {
		getDetails,
		getGoodsRealOrderList,
		postCreateOrder
	} from '@/api'
	import {
		appConfig
	} from "@/config"
	export default {
		async onLoad(options) {
			this.options.id = options?.id || 0
			this.getWindowHeight()
			await this.getDetail()
			await this.getOrderList()
		},
		computed: {
			total() {
				return Number(this.order.parts_price) * this.options.number
			},
		},
		data() {
			return {
				show: false,
				// 下单选择
				orderShow: false,
				options: {
					id: '',
					number: 1,
					address_id: 0,
					realorder_id: '',
				},
				order: {},
				fixedShow: false,
				list: ['商品详情', '备注详情'],
				current: 0,
				currentNum: 0,
				toView: '',
				height: '',
				columns: [],
			}
		},
		methods: {
			getChangeNumber(e) {
				this.options.number = e.value
			},
			async submit() {
				if (Number(this.order.parts_price) === 0) {
					return this.toast('价格有误，请先联系师傅，设置价格后再操作.')
				}
				if (this.options.realorder_id === '') {
					return this.toast('请选择订单')
				}
				const {
					code,
					data
				} = await postCreateOrder(this.options)
				if (code === 1) {
					this.toast('下单成功')
					setTimeout(() => {
						this.back()
						uni.$emit('getChange')
					}, 1000)
				}
			},
			confirm({
				value
			}) {
				this.options.realorder_text = value[0].text
				this.options.realorder_id = value[0].realorder_id
				this.orderShow = false
			},
			callPhone(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber
				})
			},
			openImage(current) {
				uni.previewImage({
					urls: this.order.images_list,
					current
				})
			},
			async getOrderList() {
				const {
					data
				} = await getGoodsRealOrderList()
				if (data.length > 0) {
					this.columns = [data.map(o => ({
						realorder_id: o.realorder_id,
						text: o.address + o.customerphone
					}))]
				}
			},
			async getDetail() {
				const {
					data
				} = await getDetails({
					id: this.options.id
				})
				data.images_list = data.images_list && data.images_list.map(o => (o = appConfig.imgCDN + o.replace(
					/\\/g, "/")))
				if (data.images_list.length == 0) {
					data.images_list = ['/static/image/noImage.png']
				}
				this.order = data
			},
			getChange(e) {
				this.current = e
				const currentObj = {
					0: 'goods',
					1: 'remark'
				}
				this.toView = currentObj[e]
			},
			scrollY(e) {
				if (e.detail.scrollTop > 40) {
					this.fixedShow = true
				} else {
					this.fixedShow = false
				}
			},
			getWindowHeight() {
				const that = this
				uni.getSystemInfo({
					success: ({
						windowHeight
					}) => {
						that.height = `calc(${windowHeight}px - 100rpx)`
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.goods-fixed {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1
	}

	.goods-info_box {
		display: flex;
		font-size: 28rpx;
		margin-bottom: 20rpx;

		.box {
			flex: 1;

			&-label {
				color: #999;
				margin-right: 20rpx;
			}

			&-value {
				color: #000;
			}
		}
	}

	.goods {
		&-info {
			padding: 20rpx;
			background-color: #ffffff;
			color: #333;

			&_title {
				margin: 30rpx 0 20rpx 0;
				font-size: 36rpx;
			}

		}



		&-publicBox {
			margin: 20rpx;

			&-title {
				background-color: #fff;
				line-height: 80rpx;
				font-size: 32rpx;
				padding-left: 20rpx;
				position: relative;

				&:before {
					content: "";
					position: absolute;
					left: 0;
					top: 50%;
					-webkit-transform: translateY(-50%);
					transform: translateY(-50%);
					width: 6rpx;
					height: 60rpx;
					background: #f00;
				}
			}

			&-content {
				padding: 20rpx 0;

				.image {
					min-width: 100%;
				}
			}

		}

		&-button {
			display: flex;
			line-height: 100rpx;
			font-size: 28rpx;
			border-top: 0.5px solid #fff;

			.button {
				flex: 1;
				text-align: center;

				&:first-child {
					background-color: #f7f7f7;
					color: #929292;
				}

				&:last-child {
					background-color: #ff0000;
					color: #fff;
				}
			}
		}
	}

	/deep/.u-swiper__indicator {
		right: 10px;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.order-buy {
		background: #fff;
		padding: 60rpx 28rpx 40rpx 20rpx;
		font-size: 28rpx;

		&-top {
			display: flex;

			.order-buy-content {
				margin-left: 20rpx;

				.title {
					font-size: 48rpx;
					margin-bottom: 20rpx;
				}
			}
		}

		&-price {
			margin-top: 40rpx;
		}

		&-number {
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		&-choose {
			margin: 40rpx 0;
			display: flex;
			align-items: center;
		}

	}

	/deep/.u-input {
		background-color: transparent !important;
	}
</style>